<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/* 显示/隐藏的过渡效果 */
			.xxx-enter-to, .xxx-leave-active{
				transition: opacity 1s;
			}
			/* 隐藏时的样式 */
			.xxx-enter, .xxx-leave-to{
				opacity: 0;
			}
			
			
			/* 显示/隐藏的过渡效果 */
			.move-enter-to{
				transition: all 1s;
			}
			/* 隐藏时的样式 */
			.move-leave-active{
				transition: all 3s;
			}
			/* 隐藏时的样式 */
			.move-enter, .move-leave-to{
				opacity: 0;
				transform: translateX(20px);
			}
		</style>
	</head>
	<body>
		<!--
        	1. vue动画的理解
        		操作css的transition或animation
        		vue会给目标元素添加/移除特定的class
        	2. 基本过渡动画的编码
        		1) 在目标元素外包裹<transition name="xxx">
        		2) 自定义class样式
        			a. 指定过渡样式: transition
        			b. 指定隐藏时的样式: opacity/其他
        	3. 过渡的类名
        		xxx-enter-active: 指定显示的transition
        		xxx-leave-active: 指定隐藏的transition
        		xxx-enter: 指定隐藏时的样式
        -->
        
        <div id="test">
        	<button @click="isShow=!isShow">toggle</button>
        	<transition name="xxx">
        		<p v-show="isShow">hello</p>
        	</transition>
        </div>
        
        <div id="test2">
        	<button @click="isShow=!isShow">toggle</button>
        	<transition name="move">
        		<p v-show="isShow">hello</p>
        	</transition>
        </div>
        
        <script type="text/javascript" src="js/vue.js"></script>
        <script>
        	new Vue({
        		el: "#test",
        		data(){
        			return{
        				isShow: true
        			}
        		}
        	})
        	
        	new Vue({
        		el: "#test2",
        		data(){
        			return{
        				isShow: true
        			}
        		}
        	})
        </script>
	</body>
</html>
